<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { getCompanyRobotList } from "@/api/disinfect/robot-manage";

const robotData = ref([]);
getData();
async function getData() {
  const {
    data: { list },
  } = await getCompanyRobotList();
  if (list) {
    robotData.value = list;
  }
}

const router = useRouter();
function showDetails(id) {
  router.push({ name: "disinfect-robot-details", query: { id } });
}
</script>
<template>
  <div class="h-main p-4">
    <div class="grid grid-cols-4 gap-4">
      <div
        v-for="item in robotData"
        :key="item.id"
        data-test="robot-info"
        class="flex rounded-md shadow-md bg-[#f1f3fa] select-none items-center"
        @click="showDetails(item.code)"
      >
        <img class="w-14 h-14 m-4" src="@/assets/images/disinfect/robot.png" />
        <div class="flex flex-col justify-between grow">
          <div class="font-bold">{{ item.name }}</div>
          <div class="text-sm text-[#acb5d9] mt-1">
            {{ item.status === "0" ? "离线" : "在线" }}
          </div>
        </div>
        <div
          :class="item.abnormalState === 1 ? 'bg-[#f83c20]' : 'bg-[#50d4b4]'"
          class="flex items-center justify-center text-white rounded-full text-sm font-bold w-14 h-14 m-4"
        >
          {{ item.abnormalState === 1 ? "异常" : "正常" }}
        </div>
      </div>
    </div>
  </div>
</template>
